<template>
    <div>
        <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>车间看板管理</el-breadcrumb-item>
        <el-breadcrumb-item>主任看板</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图 -->
    <el-card>
		<el-row :gutter="20">
			<el-col :span="5">
				<div class="attendance">
					<div style="position: relative;">
						<div style="font-size: 26px;color: #ffffff;">
							出勤情况
						</div>
						<div style="font-size: 5px;color: #ffffff;">
							ATTENDANCE
						</div>
						<div style="left: 50%;transform: translateX(-50%);position: absolute;">
							<el-progress type="circle" :percentage="91" class="circle" >
								<h1 style="color: #7F9DFF;">出勤率</h1>
								<h1 style="color: #ffffff;">91%</h1>
							</el-progress>
						</div>
						<div style="width: 100%;margin: 130px 10px 0px 10px;">
							<div style="color: #ffffff;font-size: 14px;">
								当前在岗人数
								<el-progress percentage="91" color="#00C2A4" stroke-linecap="square"></el-progress>
							</div>
							<div style="color: #ffffff;font-size: 14px;">
								当前请假人数
								<el-progress percentage="91" color="#005983" stroke-linecap="square"></el-progress>
							</div>
						</div>
					</div>
				</div>
			</el-col>
			<el-col :span="7">
				<div class="status">
					<div style="font-size: 26px;color: #ffffff;">
						设备实时状态
					</div>
					<div style="font-size: 5px;color: #ffffff;">
						REAL TIME STATUS
					</div>
					<div style="width: 100%;height: 200px;display: flex;justify-content: space-around;">
						<div id="statusech">
							
						</div>
						<div style="display: flex;justify-content:center ;flex-direction: column;height: 240px;">
							<div style="margin-top: 15px;color: #7F9DFF;font-size: 14px;">
								正在运行：<span style="color: #ffffff;">50台</span>
							</div>
							<div style="margin-top: 15px;color: #7F9DFF;font-size: 14px;">
								暂未生产：<span style="color: #ffffff;">20台</span>
							</div>
							<div style="margin-top: 15px;color: #7F9DFF;font-size: 14px;">
								空闲设备：<span style="color: #ffffff;">20台</span>
							</div>
							<div style="margin-top: 15px;color: #7F9DFF;font-size: 14px;">
								故障设备：<span style="color: #ffffff;">20台</span>
							</div>
						</div>
					</div>
				</div>
				
			</el-col>
			<el-col :span="12">
				<div class="efficiency">
					<div style="font-size: 26px;color: #ffffff;">
						所有设备工作效率
					</div>
					<div style="font-size: 5px;color: #ffffff;">
						PRODUCT EFFICENCY
					</div>
					<div style="width: 100%;display: flex;justify-content: space-around;margin-top: 10px;">
						<div>
							<el-progress type="circle" :percentage="91" class="circle" width="90" color="#FFB751">
								<h1 style="color: #7F9DFF;">设备1</h1>
								<h1 style="color: #ffffff;">50%</h1>
							</el-progress>
						</div>
						<div>
							<el-progress type="circle" :percentage="91" class="circle" width="90" color="#FFB751">
								<h1 style="color: #7F9DFF;">设备1</h1>
								<h1 style="color: #ffffff;">50%</h1>
							</el-progress>
						</div>
						<div>
							<el-progress type="circle" :percentage="91" class="circle" width="90" color="#FFB751">
								<h1 style="color: #7F9DFF;">设备1</h1>
								<h1 style="color: #ffffff;">50%</h1>
							</el-progress>
						</div>
						<div>
							<el-progress type="circle" :percentage="91" class="circle" width="90" color="#FFB751">
								<h1 style="color: #7F9DFF;">设备1</h1>
								<h1 style="color: #ffffff;">50%</h1>
							</el-progress>
						</div>
						<div>
							<el-progress type="circle" :percentage="91" class="circle" width="90" color="#FFB751">
								<h1 style="color: #7F9DFF;">设备1</h1>
								<h1 style="color: #ffffff;">50%</h1>
							</el-progress>
						</div>
						<div>
							<el-progress type="circle" :percentage="91" class="circle" width="90" color="#FFB751">
								<h1 style="color: #7F9DFF;">设备1</h1>
								<h1 style="color: #ffffff;">50%</h1>
							</el-progress>
						</div>
						</div>
						<div style="width: 100%;display: flex;justify-content: space-around;margin-top: 10px;">
						<div>
							<el-progress type="circle" :percentage="91" class="circle" width="90" color="#FFB751">
								<h1 style="color: #7F9DFF;">设备1</h1>
								<h1 style="color: #ffffff;">50%</h1>
							</el-progress>
						</div>
						<div>
							<el-progress type="circle" :percentage="91" class="circle" width="90" color="#FFB751">
								<h1 style="color: #7F9DFF;">设备1</h1>
								<h1 style="color: #ffffff;">50%</h1>
							</el-progress>
						</div>
						<div>
							<el-progress type="circle" :percentage="91" class="circle" width="90" color="#FFB751">
								<h1 style="color: #7F9DFF;">设备1</h1>
								<h1 style="color: #ffffff;">50%</h1>
							</el-progress>
						</div>
						<div>
							<el-progress type="circle" :percentage="91" class="circle" width="90" color="#FFB751">
								<h1 style="color: #7F9DFF;">设备1</h1>
								<h1 style="color: #ffffff;">50%</h1>
							</el-progress>
						</div>
						<div>
							<el-progress type="circle" :percentage="91" class="circle" width="90" color="#FFB751">
								<h1 style="color: #7F9DFF;">设备1</h1>
								<h1 style="color: #ffffff;">50%</h1>
							</el-progress>
						</div>
						<div>
							<el-progress type="circle" :percentage="91" class="circle" width="90" color="#FFB751">
								<h1 style="color: #7F9DFF;">设备1</h1>
								<h1 style="color: #ffffff;">50%</h1>
							</el-progress>
						</div>
					</div>
				</div>
			</el-col>
		</el-row>
		<el-row :gutter="20">
			<el-col :span="14">
				<div class="details">
					<div>
						<div style="font-size: 26px;color: #ffffff;">
							生产详情
						</div>
						<div style="font-size: 5px;color: #ffffff;">
							PRODUCTION DETAILS
						</div>
					</div>
					<el-table :data="tableData" style="width: 100%" :cell-style="{color:'#ffffff',fontSize:'14px'}" :header-cell-style="{color:'#ffffff',fontSize:'16px',fontWeight:'Bold'}">
						<el-table-column prop="name" label="项目名称" width="130">
						</el-table-column>
						<el-table-column prop="data" label="截止日期" width="130">
						</el-table-column>
						<el-table-column prop="state" label="状态" width="70">
						</el-table-column>
						<el-table-column prop="predict" label="预计" width="70">
						</el-table-column>
						<el-table-column prop="consume" label="消耗" width="70">
						</el-table-column>
						<el-table-column prop="residue" label="剩余" width="70">
						</el-table-column>
						<el-table-column prop="progress" label="进度" width="180" align="center">
							<template #default="scope">
								<el-progress :percentage="scope.row.progress" color="#5D85F1"></el-progress>
							</template>
						</el-table-column>
						<el-table-column prop="print" label="燃尽图" width="180" align="center">
						</el-table-column>
					</el-table>
				</div>
			</el-col>
			<el-col :span="10">
				<div class="detection">
					<div>
						<div style="font-size: 26px;color: #ffffff;">
							最近检测工单跟踪
						</div>
						<div style="font-size: 5px;color: #ffffff;">
							WORK ORDER DETECTION
						</div>
					</div>
					<el-table :data="worktableData" style="width: 100%" :cell-style="{color:'#ffffff',fontSize:'14px'}" :header-cell-style="{color:'#ffffff',fontSize:'16px',fontWeight:'Bold'}">
						<el-table-column prop="no" label="订单号" width="120">
						</el-table-column>
						<el-table-column prop="name" label="产品名称" width="120">
						</el-table-column>
						<el-table-column prop="serial" label="产品编号" width="120">
						</el-table-column>
						<el-table-column prop="plan" label="计划数量" width="100">
						</el-table-column>
						<el-table-column prop="accomplish" label="完成数量" width="100">
						</el-table-column>
						<el-table-column prop="YIELD" label="合格率" width="100">
						</el-table-column>
					</el-table>
				</div>
			</el-col>
		</el-row>
    </el-card>
    </div>
</template>

<script>
import axios from 'axios'
export default {
  data () {
    return {
		tableData: [{
			name: '测试设备XX1',
			data: '2021-04-25',
			state: '已延期',
			predict: '0',
			consume: '0',
			residue: '0',
			progress: '0',
			print: '',
		
		}, {
			name: '测试设备XX1',
			data: '2021-04-25',
			state: '已延期',
			predict: '0',
			consume: '0',
			residue: '0',
			progress: '20',
			print: '',
		}, {
			name: '测试设备XX1',
			data: '2021-04-25',
			state: '已延期',
			predict: '0',
			consume: '0',
			residue: '0',
			progress: '0',
			print: '',
		}, {
			name: '测试设备XX1',
			data: '2021-04-25',
			state: '已延期',
			predict: '0',
			consume: '0',
			residue: '0',
			progress: '80',
			print: '',
		}, {
			name: '测试设备XX1',
			data: '2021-04-25',
			state: '已延期',
			predict: '0',
			consume: '0',
			residue: '0',
			progress: '50',
			print: '',
		}, {
			name: '测试设备XX1',
			data: '2021-04-25',
			state: '已延期',
			predict: '0',
			consume: '0',
			residue: '0',
			progress: '50',
			print: '',
		}, {
			name: '测试设备XX1',
			data: '2021-04-25',
			state: '已延期',
			predict: '0',
			consume: '0',
			residue: '0',
			progress: '50',
			print: '',
		}, {
			name: '测试设备XX1',
			data: '2021-04-25',
			state: '已延期',
			predict: '0',
			consume: '0',
			residue: '0',
			progress: '50',
			print: '',
		}],
		worktableData:[{
			no:'1022336486',
			name:'XXX清洗器',
			serial:'AS45156',
			plan:'1300',
			accomplish:'3000',
			YIELD:'80%'
		},{
			no:'1022336486',
			name:'XXX清洗器',
			serial:'AS45156',
			plan:'1300',
			accomplish:'3000',
			YIELD:'80%'
		},{
			no:'1022336486',
			name:'XXX清洗器',
			serial:'AS45156',
			plan:'1300',
			accomplish:'3000',
			YIELD:'80%'
		},{
			no:'1022336486',
			name:'XXX清洗器',
			serial:'AS45156',
			plan:'1300',
			accomplish:'3000',
			YIELD:'80%'
		},{
			no:'1022336486',
			name:'XXX清洗器',
			serial:'AS45156',
			plan:'1300',
			accomplish:'3000',
			YIELD:'80%'
		},{
			no:'1022336486',
			name:'XXX清洗器',
			serial:'AS45156',
			plan:'1300',
			accomplish:'3000',
			YIELD:'80%'
		},{
			no:'1022336486',
			name:'XXX清洗器',
			serial:'AS45156',
			plan:'1300',
			accomplish:'3000',
			YIELD:'80%'
		},{
			no:'1022336486',
			name:'XXX清洗器',
			serial:'AS45156',
			plan:'1300',
			accomplish:'3000',
			YIELD:'80%'
		}]
    }
  },
  mounted () {
	  this.getstatusech()
  },
  methods: {
	  getstatusech() {
		  // 基于准备好的dom，初始化echarts实例
		  var myChart = this.$echarts.init(document.getElementById("statusech"));
		  // 绘制图表
		  myChart.setOption({
		  	 tooltip: {
		  	        trigger: 'item'
		  	    },
		  	    series: [
		  	        {
		  	            name: '访问来源',
		  	            type: 'pie',
		  	            radius: ['40%', '70%'],
		  	            avoidLabelOverlap: false,
		  	            emphasis: {
		  	                label: {
		  	                    show: true,
		  	                    fontSize: '40',
		  	                    fontWeight: 'bold'
		  	                }
		  	            },
		  	            labelLine: {
		  	                show: true,
		  	            },
		  	            data: [
		  	                {value: 50, name: '50%'},
		  	                {value: 20, name: '20%'},
		  	                {value: 20, name: '20%'},
		  	                {value: 10, name: '10%'},
		  	            ]
		  	        }
		  	    ]
		  });
	  }
  }
}
</script>

<style lang="less" scoped>
	/deep/.el-card__body{
		background-color: #031331;
	}
	/deep/.el-table__body-wrapper{
		background-color: #091835;
	}
	/deep/.el-table__row{
		background-color: #091835;
	}
	/deep/.el-table td{
	border-bottom: 1px solid #091835; 
	}
	/deep/.el-table th{
	border-bottom: 1px solid #091835; 
	}
	/deep/.el-table--border::after, .el-table--group::after, .el-table::before{
		    background-color: #091835;
	}
	/deep/.el-table__header-wrapper{
		background-color: #091835;
	}
	/deep/.is-leaf{
		background-color: #091835;
	}
.attendance {
	height: 280px;
	background-color: #091835;
}
.status {
	height: 280px;
	background-color: #091835;
	#statusech {
		width: 320px;
		height: 240px;
	}
}
.efficiency {
	height: 280px;
	background-color: #091835;
}
.details {
	height: 480px;
	margin-top: 20px;
	background-color: #091835;
}
.detection {
	height: 480px;
	margin-top: 20px;
	background-color: #091835;
}
</style>
